<template>
  <div class="app-container">
    <el-container>
      <el-main style="padding-top: 0">
        <el-tabs>
          <el-tabs v-show="item" v-model="active" type="card">
            <el-tab-pane name="info">
              <span slot="label"><i class="el-icon-document"></i> 接口信息</span>
              <doc-view
                :item="item"
                :url-prod="docVO.urlProd"
              />
            </el-tab-pane>
            <el-tab-pane name="debug">
              <span slot="label"><i class="el-icon-position"></i> 接口调试</span>
              <docdebug
                :item="item"
                :app-id="docVO.appId"
                :gateway-url="docVO.gatewayUrl"
              />
            </el-tab-pane>
          </el-tabs>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import 'mavon-editor/dist/css/index.css'
  import docView from '@/components/DocView'
  import docdebug from '@/components/Docdebug'

  export default {
    components: {docView, docdebug},
    data() {
      return {
        active: 'info',
        docVO: {
          appId: '',
          gatewayUrl: '',
          urlProd: '',
          urlTest: '',
          menuProjects: []
        },
        item: null,
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    created() {
      const itemId = this.$route.query.itemId
      if (itemId) {
        this.showDoc(itemId)
      }
    },
    methods: {
      showDoc: function (itemId) {
        this.get('/portal/isv/getDocItem', {id: itemId}, function (resp) {
          this.item = resp.data.docItem
          this.docVO = resp.data
          this.docVO.appId = sessionStorage.getItem("appKey")
        })

      }
    }
  }
</script>
